<template>
  <div class="details-container">
    <!-- banner -->
    <CommonHead @button-click="handleClickSwitch" @logo-click="handleLogo"></CommonHead>
    <div class="banner pr">
      <ul class="desigin-ul">
        <li v-for="item in categorySelectArr " :key="item.id">
          <a class="file_type" @click="handleFileType(item.id)">{{ item.name }}</a>
        </li>

      </ul>
      <div class="banner-characters">用更好的创意 为您的企业赋能</div>
      <div class="banner-describe">
        数以万计的国内知名的设计师和机构在uimall上展示他们的设计工作,
        <br />我们拥有国内优秀的设计和创意专业人士。
      </div>
      <div class="search-for">
        <form>
          <div class="search-box pr">

            <!-- 搜索 -->
            <input type="text" placeholder="search...." v-model="searchText" />
            <button class="submit-btn">
              <img src="@/assets/img/sou.svg" alt="" />
            </button>
          </div>
        </form>
      </div>
      <form>
        <div class="hot-search">
          <span> 热门搜索 </span>
          <ul class="hot-search-ul">
            <li v-for="item in industrySelectArr" :key="item.id">
              <a class="hotSearch" @click="hanleHotSearch(item.name)"> {{ item.name }} </a>
            </li>

          </ul>
        </div>
      </form>
    </div>
    <!-- 筛选 -->
    <div class="filter-subnav">
      <div class="container">
        <div class="clearfix filter-top">
          <div class="fl">
            <div class="btn-group">
              <button type="button" class="btn" @click="onBtnClick()">
                查看次数最多
                <svg v-if="showDetail" t="1678697805620" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xml="//www.w3.org/2000/svg" p-id="2567" width="16" height="16">
                  <path
                    d="M540.928 266.83733334l-30.165333-30.20799999-415.957334 415.82933299a42.837333 42.837333 0 0 0-1e-8 60.288 42.538667 42.538667 0 0 0 60.33066701 0.042667l355.541333-355.413333 355.242667 355.413333a42.496 42.496 0 0 0 60.288 0 42.837333 42.837333 0 0 0 0.085333-60.33066699l-383.701333-383.87200002-1.706667-1.74933299z"
                    fill="#3D3D3D" p-id="2568"></path>
                </svg>
                <svg v-else t="1678697357385" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xml="//www.w3.org/2000/svg" p-id="2417" width="16" height="16">
                  <path
                    d="M483.072 714.496l30.165333 30.208 415.957334-415.829333a42.837333 42.837333 0 0 0 0-60.288 42.538667 42.538667 0 0 0-60.330667-0.042667l-355.541333 355.413333-355.242667-355.413333a42.496 42.496 0 0 0-60.288 0 42.837333 42.837333 0 0 0-0.085333 60.330667l383.701333 383.872 1.706667 1.749333z"
                    fill="#3D3D3D" p-id="2418"></path>
                </svg>
              </button>
              <div v-if="showDetail" class="dropdown-menu">
                <a class="dropdown-item">受欢迎的</a>

                <div class="dropdown-item" @click="sortByDate">最新的</div>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">市场</a>
              </div>
            </div>
            <!-- <el-select v-model="value" class="m-2" placeholder="Select" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
             -->
          </div>
          <div class="fr">
            <button class="filter-btn" @click="filtershow">
              <svg xml="//www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" role="img"
                class="icon filter-icon icon-14">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M0 6C0 5.17157 0.671573 4.5 1.5 4.5H22.5C23.3284 4.5 24 5.17157 24 6C24 6.82843 23.3284 7.5 22.5 7.5H1.5C0.671573 7.5 0 6.82843 0 6ZM3 12C3 11.1716 3.67157 10.5 4.5 10.5H19.5C20.3284 10.5 21 11.1716 21 12C21 12.8284 20.3284 13.5 19.5 13.5H4.5C3.67157 13.5 3 12.8284 3 12ZM7.5 16.5C6.67157 16.5 6 17.1716 6 18C6 18.8284 6.67157 19.5 7.5 19.5H16.5C17.3284 19.5 18 18.8284 18 18C18 17.1716 17.3284 16.5 16.5 16.5H7.5Z">
                </path>
              </svg>
              筛选
            </button>
          </div>
        </div>
        <div class="filter-bot uploadworks" :class="{ active: filter }">
          <div class="row uploadworks-foot">
            <div class="col-lg-3 col-sm-6">
              <p>标签 {{ tagSearchText }}</p>
              <div class="searchinp pr">
                <input type="text" placeholder="搜索..." v-model="tagSearchText" />
                <button><i class="iconfont icon-sousuo1"></i></button>
              </div>
            </div>
            <div class="col-lg-3 col-sm-6">
              <p>颜色{{ colorSelectInput }}</p>
              <div class="xiala-color pr">
                <input type="text" placeholder="输入十六进制或者选择" v-model="colorSelectInput" />
                <div class="quans pa" @click="colorshow()">
                  <img src="@/assets/img/color.svg" alt="" />
                </div>
                <div class="soitemcontent color_both" v-if="colorhover">
                  <ul>
                    <li><a style="background-color: #f94242"></a></li>
                    <li><a style="background-color: #ff9900"></a></li>
                    <li><a style="background-color: #00c90e"></a></li>
                    <li><a style="background-color: #0074f6"></a></li>
                    <li><a style="background-color: #d042f9"></a></li>
                    <li><a style="background-color: #fff"></a></li>
                    <li><a style="background-color: #999"></a></li>
                    <li><a style="background-color: #000"></a></li>
                    <li><a style="background-color: #fff">其他</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-sm-6">
              <p>行业 </p>
              <!-- 行业筛选 -->
              <el-select placeholder="--选择行业--  " v-model="industryInput" @change="handleIndustry(industryInput)">
                <el-option v-for="item in industrySelectArr" :key="item.id" :label="item.name" :value="item.name"
                  filterable="true" />
              </el-select>

            </div>
            <div class="col-lg-3 col-sm-6 sele-layout">
              <p>UI类型</p>
              <el-select v-model="uiSelectText" placeholder="UI类型" class="sele-layout" @change="handleUI(uiSelectText)">
                <el-option v-for="item in uiSelectArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 案例 -->
    <div class="index-case">
      <div class="container">
        <div class="row">
          <!-- 列表页面· -->
          <div class="col-lg-3 col-sm-6" v-for="item in listArr" :key="item.id">
            <div class="case-div">
              <div class="case-img pr">
                <a @click="handleClick(item.id)">
                  <img :src="baseUrl + `${item.image}`" alt="" class="w100">
                </a>
                <div class="give-box pa">
                  <a href="javascript:;" class="give-a" @click="dianzan((this.zan = !this.zan))"
                    :class="[zan ? '' : 'active']">
                    <i class="iconfont icon-dianzan_kuai"></i>
                  </a>
                  <!-- 点击收藏 -->
                  <a href="javascript:;" class="collect-a" @click="handleCollect(item.id)">
                    <i class="iconfont icon-shoucang"></i>
                  </a>

                  <!-- 创建收藏夹-->
                  <div class="tanchu-box" v-if="favorites">
                    <div class="modify-avatar">
                      <div class="colse pa" @click="cancel">
                        <i class="iconfont icon-guanbi"></i>
                      </div>
                      <p class="tile">添加作品</p>
                      <div class="edit-box">
                        <ul>
                          <li>
                            <p>收藏夹名称
                              {{ addCollectText }}

                            </p>
                            <!-- <input type="text" placeholder="喜欢的网站" /> -->
                            <el-select v-model="addCollectText" class="m-2" placeholder="选择收藏夹" size="large"
                              @change="handleDialog(addCollectText)">
                              <el-option v-for="i in collectFolderArr" :key="i.id" :label="i.name" :value="i.id" />
                            </el-select>

                          </li>
                          <!-- <li>
                            备注
                            <textarea v-model="notes"> </textarea>
                            <p class="bz-p">URL 是超链接的。只允许 'a'。</p>
                          </li> -->
                        </ul>
                      </div>
                      <div class="overall-btn ta">
                        <a @click="handleSave">保存</a>
                        <a @click="cancel">取消</a>
                      </div>
                    </div>
                  </div>




                </div>
              </div>
              <div class="case-bot">
                <p class="case-title">
                  <a>{{ item.title }}</a>
                </p>
                <p class="case-bq">版权登记号：{{ item.copyright_type }}</p>
                <div class="case-website">

                  <!-- 小标签 -->
                  <a href="" v-for="t in item.type_name">{{ t }}</a>

                </div>
                <div class="sculpture-box clearfix pr">
                  <div class="sculpture fl">
                    <!-- 名字 -->
                    <a href="" @mouseover="hover = true" @mouseleave="hover = false">
                      <img :src="item.user.avatar ? baseUrl + `${item.user.avatar}` : require('../assets/img/1.png')"
                        alt="" class="w100" />
                      {{ item.user.name }}
                    </a>



                    <!-- 弹窗 -->
                    <div class="sculpture-hover pa">
                      <div class="sculpture-top clearfix">
                        <div class="fl sculpture-left">
                          <!-- <img :src="item.userpic ? item.userpic : require('../assets/img/1.png')" alt="" /> -->
                          <div>
                            <p class="name-position">网页设计师</p>

                          </div>
                        </div>
                        <div class="fr hire-me overall-btn">
                          <a href="">雇用我</a>
                        </div>
                      </div>
                      <ul class="sculpture-works-ul clearfix">
                        <li v-for="child in item.images.split(',')" :key="child.id">
                          <a href="">
                            <img :src="baseUrl + child" alt="" />
                          </a>

                        </li>

                      </ul>
                    </div>
                  </div>
                  <!-- 点赞 -->
                  <div class="fr collect">
                    <span class="collect-span"> <i class="iconfont icon-shoucang"></i> {{ }} </span>
                    <span class="glance-span"> <i class="iconfont icon-liulan"></i>{{}} </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="pageTotal" />

    </div>


    <!-- 登陆后隐藏 -->
    <div v-if="!isLogin" class="footer">
      <div class="foot-top">
        <div class="foot-top-zc">
          <a href="/register"> 注册</a> 或<a href="/sign">登录</a> 您的帐户，获得创意成果，受雇于无数家企业。
        </div>
        <div class="phone-box">
          <a href="/sign" class="phone-a"> 使用手机号 </a>
          或者
          <a href="javascript:;" class="" @click="show">
            <svg t="1678699421155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5951" width="32" height="32">
              <path
                d="M512 51.2C257.5104 51.2 51.2 257.5104 51.2 512c0 254.4896 206.3104 460.8 460.8 460.8 254.4896 0 460.8-206.3104 460.8-460.8C972.8 257.5104 766.4896 51.2 512 51.2zM512 947.2C272.0256 947.2 76.8 751.9744 76.8 512 76.8 272.0256 272.0256 76.8 512 76.8s435.2 195.2256 435.2 435.2C947.2 751.9744 751.9744 947.2 512 947.2z"
                p-id="5952" fill="#9E9EA7"></path>
              <path
                d="M612.1088 421.0176c6.4896 0 12.9152 0.4736 19.2768 1.1904C614.0672 341.5424 527.8208 281.6 429.376 281.6c-110.0544 0-200.2176 75.0208-200.2176 170.2784 0 54.9888 29.9904 100.1472 80.1152 135.168l-20.0192 60.2368 69.9904-35.0976c25.0496 4.9536 45.1328 10.0608 70.1312 10.0608 6.2848 0 12.5184-0.3072 18.688-0.7936-3.9168-13.3888-6.1824-27.4048-6.1824-41.9584C441.8816 492.0064 517.0048 421.0176 612.1088 421.0176zM504.448 366.7328c15.0784 0 25.0624 9.92 25.0624 24.9856 0 15.0016-9.984 25.0624-25.0624 25.0624-15.0016 0-30.0672-10.0608-30.0672-25.0624C474.3936 376.6528 489.4464 366.7328 504.448 366.7328zM364.3264 416.7808c-15.0016 0-30.144-10.0608-30.144-25.0624 0-15.0656 15.1424-24.9856 30.144-24.9856 15.0016 0 24.9984 9.92 24.9984 24.9856C389.3248 406.7328 379.3408 416.7808 364.3264 416.7808z"
                p-id="5953" fill="#9E9EA7"></path>
              <path
                d="M624.7808 431.7824c-95.2576 0-170.2912 65.2544-170.2912 145.2928 0 80.192 75.0336 145.2928 170.2912 145.2928 19.9424 0 40.0512-5.0304 60.0704-10.048L739.7632 742.4l-15.0528-50.0352c40.192-30.1568 70.1312-70.1312 70.1312-115.2896C794.8416 497.024 714.7392 431.7824 624.7808 431.7824zM569.5616 552.0256c-9.9712 0-20.032-9.92-20.032-20.032 0-9.9712 10.0608-20.0192 20.032-20.0192 15.1424 0 25.0624 10.048 25.0624 20.0192C594.624 542.1056 584.704 552.0256 569.5616 552.0256zM679.6928 552.0256c-9.8944 0-19.8912-9.92-19.8912-20.032 0-9.9712 9.984-20.0192 19.8912-20.0192 15.0016 0 25.0624 10.048 25.0624 20.0192C704.7552 542.1056 694.6944 552.0256 679.6928 552.0256z"
                p-id="5954" fill="#9E9EA7"></path>
            </svg>
          </a>
        </div>
      </div>
      <FootCopyright></FootCopyright>
      <!--  二维码登录-->

      <QrLogin ref="qrogin"></QrLogin>
    </div>
  </div>
  <RouterView />
</template>
<script >
import { ref } from 'vue'
import QrLogin from '@/components/QrLogin.vue'
const value = ref('')
import * as api from "@/api/users"

import { ElLoading } from "element-plus"




export default {

  components: {
    QrLogin
  },
  data() {
    return {
      colorhover: false,
      showDetail: false,
      hover: false,
      filter: false,
      isActive: true,
      zan: false,
      // tradeoptions: tradeoptions1,
      zanListId: [1, 2],
      typevalue: '',


      // 列表数据
      listArr: [],

      // userProject
      userProjectArr: [],

      // 搜索
      searchText: '',

      // 行业分类数组
      industrySelectArr: '',


      // 标签搜索双向绑定
      tagSearchText: '',

      // 行业搜索
      industryInput: '',

      // 行业id
      industrySelectId: '',

      // 文件类型分类
      categorySelectArr: "",

      // ui类型筛选数组
      uiSelectArr: "",

      // ui筛选双向绑定
      uiSelectText: "",

      // 颜色搜索
      colorSelectInput: "",

      // 图片网址
      baseUrl: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      // 判断是否登录
      isLogin: sessionStorage.getItem('bm-token') ? true : false,

      // 分页总数目
      pageTotal: 0,

      // 当前页码变量
      currentPage: 1,

      // 收藏
      favorites: false,

      // 收藏作品双向绑定
      addCollectText: "",

      // 收藏夹数据
      collectFolderArr: [],

      // 备注双向绑定
      notes: "",

      // 作品id
      projectId: "",

      // 收藏夹id
      collectId:"",

    }
  },

  created() {

    // 第一次调用作品列表
    this.getWorksLsit()

    this.getindustrySelectApi()

    this.getFileType()


    // this.getCollectProject(290, 19)

    this.getMycollectFolder()

    // 请求UI属性分类筛选数据
    api.uiSelectApi()
      .then(res => {
        // console.log(res);
        this.uiSelectArr = res.data.data
      })

  },
  watch: {
    // 侦听搜索input
    searchText(newValue, oldValue) {
      // console.log(newValue, oldValue);
      this.getWorksLsit(10, 1, this.searchText)

    },

    // 侦听标签搜索input
    tagSearchText(newValue, oldValue) {
      // console.log(newValue)
      const newArr = this.listArr.filter((item) => {
        if (item.tags === newValue) return item
      })
      this.getWorksLsit(10, 1, this.searchText, null, null, null, null, newValue)
    },

    // 侦听颜色搜索input
    colorSelectInput(newValue, oldValue) {
      console.log(newValue, oldValue)
      const newArr = this.listArr.filter((item) => {
        if (item.bg_color === newValue)
          return item
      })
      this.getWorksLsit(10, 1, this.searchText, null, null, null, null, null, newValue)

    }

  },
  methods: {
    // 拿到head的值
    handleClickSwitch(msg) {

      console.log(msg, 'home');
      if (msg === '生物医药') {
        this.getWorksLsit(10, 1, null, 3, null, null, null, null, null, null,)
      }
      if (msg === '娱乐游戏') {
        this.getWorksLsit(10, 1, null, 5, null, null, null, null, null, null,)

      }
      if (msg === '卡通绘画') {
        this.getWorksLsit(10, 1, null, 6, null, null, null, null, null, null,)

      }
    },

    handleLogo(e) {
      console.log(e);
      this.getWorksLsit()

    },




    // 热门搜索
    hanleHotSearch(value) {
      // console.log(value);
      const newArr = this.industrySelectArr.filter((item) => {
        if (item.name === value) return item
      })
      // console.log(newArr);
      this.getWorksLsit(10, 1, this.searchText, newArr[0].id)

    },


    // figma ps 按钮搜索
    handleFileType(id) {
      // console.log(id);
      const newArr = this.categorySelectArr.filter((item) => {
        if (item.id === id) return item
      })
      console.log(newArr[0].id);
      this.getWorksLsit(10, 1, null, null, null, null, null, null, null, newArr[0].id)
    },



    // 行业筛选
    handleIndustry(value) {
      // console.log('选中了', value);

      const newArr = this.industrySelectArr.filter((item) => {
        if (item.name === value) return item
      })

      console.log(newArr);
      // this.getWorksLsit(10, 1, this.searchText, newArr[0].id)
    },

    // ui类型筛选
    handleUI(value) {
      // console.log('选中了', value);
      const newArr = this.uiSelectArr.filter((item) => {
        if (item.name === value) return item
      })
      this.getWorksLsit(10, 1, this.searchText, null, newArr[0].id)
    },
    // 排序(最新的倒叙)
    sortByDate() {

      this.getWorksLsit(10, 1, this.searchText, null, null, 'created_at', ' desc')

    },

    // 封装一个方法，专门用于请求列表数据
    async getWorksLsit(per_page, page, title, industry, type, sort, order, tags, bg_color, file_type) {
      try {
        let res = await api.worksListApi(per_page, page, title, industry, type, sort, order, tags, bg_color, file_type)
        // 列表数据
        this.listArr = res.data.data.data

        // console.log(this.listArr);


        // 请求行业筛选数据
      } catch (e) {
        console.log(e);
      }
    },


    // 封装一个方法 用于请求file_type数据 figma photshop
    async getFileType() {
      try {
        let res = await api.categorySelectFileApi()
          .then(res => {
            // console.log(res);  
            this.categorySelectArr = res.data.data
            // console.log(this.categorySelectArr);

          })
      } catch (e) {
        console.log(e);
      }
    },




    // 封装一个请求行业筛选数据
    async getindustrySelectApi() {
      try {
        let res = await api.industrySelectApi()
        this.industrySelectArr = res.data.data
        // console.log(8888, this.industrySelectArr);
      } catch (e) {
        console.log(e)
      }
    },
    //  跳转到对应id的详情页
    handleClick(id) {
      console.log(id, 'home');

      this.$router.push({
        path: '/designerdetails',
        query: {
          id
        }
      })
    },


    // 点击收藏

    handleCollect(id) {
      // console.log(id)
      this.projectId = id
      console.log(this.projectId);
      this.favorites = true
    },



    // 收藏作品
    async getCollectProject(collect_folder_id, collect_id) {
      try {
        let res = await api.collectProjectApi(collect_folder_id, collect_id)
        console.log(e);
      } catch (e) {
        // console.log(e)
      }
    },


    // dialog取消
    cancel() {
      this.favorites = false
    },


    // 请求我的收藏夹
    async getMycollectFolder() {
      try {
        let res = await api.myCollectFolderApi()
        // console.log(res);
        this.collectFolderArr = res.data.data
        console.log(this.collectFolderArr);
      } catch (e) {
        console.log(e);
      }
    },

    // 收藏作品dialog
    handleDialog(id) {
      // console.log(id,'id');
      this.collectId = id
      console.log(this.collectId);
    },

   

    handleSave(){
      this.getCollectProject(this.collectId, this.projectId)
      alert('收藏成功')
      this.favorites =false
    },



    // ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    async onBtnClick() {
      this.showDetail = !this.showDetail // 在点击按钮是，改变showDetail的值
    },
    async colorshow() {
      console.log(this.colorhover)
      this.colorhover = !this.colorhover // 在点击按钮是，改变showDetail的值
    },

    async filtershow() {
      this.filter = !this.filter // 在点击按钮是，改变showDetail的值
    },
    async show() {
      this.$refs.qrogin.isshow = true;
    },
  },



}

</script>

<style lang="less" scoped>
.el-pagination {
  position: relative;
  left: 44%;
}

.hotSearch {
  text-decoration: none;
  cursor: pointer;
}

.file_type {
  cursor: pointer;
  text-decoration: none;

}
</style>




